<template>
    <div class="list-wrapper">
        <h3>学员缴费情况</h3>
        <div class="list-top">
            <span>课程名称：{{info.name}}</span>
            <span>开班日期：{{info.startdate}}</span>
        </div>
        <table class="list-table" border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>身份证号/SIB</th>                    
                    <th>姓名</th>
                    <th>联系电话</th>
                    <th>学费</th>
                    <th>实缴学费</th>
                    <th>积分兑换</th>
                    <th>未缴费</th>                    
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" @click="goTraineeDetail(item.id)">
                    <td>{{index+1}}</td>
                    <td>{{item.idcard?item.idcard:sib}}</td>                    
                    <td>{{item.name?item.name:item.ename}}</td>
                    <td>{{item.tel}}</td>
                    <td>{{item.tuition?item.tuition:0}}</td>
                    <td>{{item.paid?item.paid:0}}</td>
                    <td>{{item.integral?item.integral:0}}</td>
                    <td>{{item.nopay?item.nopay:0}}</td>
                </tr>
            </tbody>
        </table>
        <div class="pagination">
            <div class="mess" v-if="!list.length">暂无数据</div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      payer: "",
      info: {},
      list: []
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.payer = this.$route.params.num;
    this.fetchData();
  },
  methods: {
    fetchData() {
      let data = {
        id: this.id
      };
      this.apiPost("Dashboard/courseIncomeTrainee", data).then(res => {
        this.info = res.info;
        this.list = res.list;
      });
    },
    goTraineeDetail(id) {
      window.open(SITE + "trainee/detail/" + id);
    }
  }
};
</script>
<style lang="css" scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  min-height: 100%;
  font-size: 14px;
  overflow: hidden;
}
.list-wrapper > h3 {
  text-align: center;
  padding-top: 20px;
}
.list-top {
  padding: 10px 20px;
  width: 500px;
  margin: 0 auto;
}
.pagination {
  text-align: center;
  margin-top: 30px;
}
.mess {
  color: #666;
}
</style>
